<template>
    <div class="app-container sales-custom-content">
        <FilterForm :data="filterData" @search="getList" labelWidth="86px" />

        <el-checkbox-group
            v-model="check.list"
            :min="1"
            @change="handleChecked"
        >
            <el-checkbox
                v-for="v in check.goodsData"
                :label="v.label"
                :key="v.value"
            />
        </el-checkbox-group>
        <Table
            :api="$Api.sales.delivery.goodDetail"
            height="60vh"
            ref="Table"
            :params="params"
            :summary= true
        >
            <el-table-column type="index" />
            <el-table-column 
                label="日期" 
                align="center" 
                prop="subBillTime" 
                v-if="isCheck('日期')"
            />
            <el-table-column 
                label="品名" 
                align="center" 
                prop="goodsName" 
                v-if="isCheck('品名')"
            />
            <el-table-column 
                label="品牌" 
                align="center" 
                prop="brandName" 
                v-if="isCheck('品牌')"
            />
            <el-table-column 
                label="等级" 
                align="center" 
                prop="level"
                v-if="isCheck('等级')" 
            />
            <el-table-column 
                label="方数" 
                align="center" 
                prop="count"
             
             />
            <el-table-column 
                label="金额" 
                align="center" 
                prop="money" 
                />
            <el-table-column 
                label="厚度" 
                align="center" 
                prop="ply" 
                v-if="isCheck('厚度')"
                />
            <el-table-column 
                label="宽度" 
                align="center" 
                prop="width" 
                v-if="isCheck('宽度')"
                />
            <el-table-column 
                label="长度" 
                align="center" 
                prop="length" 
                v-if="isCheck('长度')"
                />
            <el-table-column 
                label="片数" 
                align="center" 
                prop="sliceCount" 
                v-if="isCheck('片数')"
                />
            <el-table-column 
                label="件数" 
                align="center" 
                prop="pieceCount" 
              
                />
            <el-table-column 
                label="仓库"
                align="center" 
                prop="warehouse" 
                v-if="isCheck('仓库')"
                />
            <el-table-column 
                label="提单号"
                align="center" 
                prop="ladingNum" 
                v-if="isCheck('提单号')"
                />
            <el-table-column 
                label="车牌号"
                align="center" 
                prop="carNo" 
                v-if="isCheck('车牌号')"
                />
            <el-table-column 
                label="单价"
                align="center" 
                prop="includedTaxPrice" 
                v-if="isCheck('单价')"
                />
            <el-table-column 
                label="销售员"
                align="center" 
                prop="subSalesName" 
                v-if="isCheck('销售员')"
                />
            <el-table-column 
                label="客户"
                align="center" 
                prop="subCustomerName" 
                v-if="isCheck('客户')"
                />         
        </Table>
    </div>
</template>

<script>
export default {
    data: () =>{
        return{
            filterData:[
                 {
                    label: "日期",
                    type: "period_date",
                    st: "beginRegisterTime",
                    end: "endRegisterTime",
                    scale: 2,
                },
                {
                    label: "客户",
                    name: "pactName",
                    type: "customer",
                },
                {
                    label: "销售员",
                    name: "pactName",
                    type: "sales",
                },
                {
                    label: "品名",
                    name: "goodsName",
                    type: "select",
                    select: "goodsName",
                },
                {
                    label: "品牌",
                    name: "productName",
                    type: "select",
                    select: "productName",
                },
                {
                    label: "等级",
                    name: "levelName",
                    type: "select",
                    select: "levelName",
                },
                {
                    label: "仓库",
                    name: "warehouse",
                    type: "select",
                    select: "warehouse",
                },
                { label: "厚度", name: "ply" },
                { label: "宽度", name: "width" },
                { label: "长度", name: "length" },
                { label: "片数", name: "sliceCount" },
            ],
            check:{
                
                goodsData:[
                    { label: "日期", value: "subBillTime" },
                    { label: "客户", value: "subCustomerName" },
                    { label: "销售员", value: "subSalesName" },
                    { label: "品名", value: "goodsName" },
                    { label: "品牌", value: "brandName" },
                    { label: "等级", value: "level" },
                    { label: "仓库", value: "warehouse" },
                    { label: "厚度", value: "ply" },
                    { label: "宽度", value: "width" },
                    { label: "长度", value: "length" },
                    { label: "片数", value: "sliceCount" },
                    { label: "单价", value: "includedTaxPrice" },
                    { label: "提单号", value: "ladingNum" },
                    { label: "车牌号", value: "carNo" },
                  
                ],
                list:["品名"],
            },
            
            params: {
                "params[goodsName]": 1,
            },
        }
    },
    computed:{
        isCheck() {
            return (v) => {
                let { list } = this.check;
                return list.includes(v);
            };
        },
    },
    methods: {
        getList(params){
            this.$refs.Table.getData(params);
        },
        handleChecked(checked){
            let params = {};
            let { goodsData } = this.check;
            checked.forEach((item) => {
                let k = goodsData.find((v) => {
                    return v.label === item;
                }).value;
                params[`params[${k}]`] = 1;
            });

            this.params = params;
            this.$nextTick(() => {
                this.$refs.Table.getData();
            });
        },

    },
}
</script>

<style lang="scss" scoped>
.sales-custom-content{
    .el-checkbox-group {
        .el-checkbox {
            margin: 0 30px 20px 0;
        }
    }
}
    
</style>